<template>
  <div class="wrapper">
    <div class="top">
      <div class="tips">消费金额</div>
      <div class="input">
        <div>￥{{ (allMoney * count) | strip }}</div>
      </div>
      <div class="count">
        数量:
        <input type="number" v-model="count" />
      </div>
    </div>

    <div class="money">
      <div class="money-item">
        <div class="expenditure-amount">实付金额</div>
        <div class="preferential-amount">
          <div class="total-money">
            ￥{{ (allMoney * count) | strip }} &nbsp;
          </div>
          <div class="totalFee">
            共优惠{{ totalFee * count }}元
            <div class="kong"></div>
          </div>
        </div>
      </div>
      <div class="btn">
        <get-user-info
          :btn-class="'btns'"
          style="flex:1;margin:0 40rpx;"
          @checks="checks"
        >
          <slot>支 付</slot>
        </get-user-info>
        <button class="cancel btns" @click="back">取 消</button>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins'
import { payProducts, aliPay } from '@/api'
import getUserInfo from '@/components/get-user-info'

export default {
  components: {
    getUserInfo
  },
  mixins: [mixins],
  onLoad(e) {
    this.allMoney = e.money
    this.id = e.id
    this.totalFee = e.totalFee - e.money
    this.storeId = e.storeId
  },
  data() {
    return {
      id: '',
      storeId: '',
      totalFee: 0,
      allMoney: 0,
      count: 1
    }
  },

  methods: {
    payment() {
      //#ifdef MP-WEIXIN
      payProducts(
        this.openId,
        this.allMoney * this.count,
        this.id,
        this.count
      ).then(res => {
        const { timeStamp, nonceStr, signType, paySign } = res
        wx.requestPayment({
          timeStamp: timeStamp,
          nonceStr: nonceStr,
          package: res.package,
          signType: signType,
          paySign: paySign,
          success: () => {
            uni.showToast({
              title: '支付成功!',
              icon: 'none'
            })
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/package/hot-cake/index'
              })
            }, 1000)
          },
          fail: err => {
            console.log(err)
          }
        })
      })
      //#endif
      //#ifdef MP-ALIPAY
      aliPay(
        this.userInfo.zfbId,
        this.storeId,
        this.allMoney * this.count
      ).then(results => {
        console.log(results)
        my.tradePay({
          // 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
          tradeNO: results.tradeNum,
          success: ress => {
            console.log(ress)
          },
          fail: err => {
            console.log(err)
          }
        })
      })
      //#endif
    },
    checks() {
      uni.showModal({
        content: '是否线上支付?',
        success: res => {
          if (res.confirm) {
            this.payment()
          }
        }
      })
    }
  },
  filters: {
    strip(num, precision = 12) {
      return +parseFloat(num.toPrecision(precision))
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  .top {
    height: 300rpx;
    position: fixed;
    background: #fff;
    width: 100%;
    top: 0;
    padding: 0 40rpx;
    display: flex;
    flex-direction: column;
    .tips {
      font-weight: 600;
      font-size: 32rpx;
      padding: 40rpx 0;
    }
    .input {
      background: #dbdbdb;
      width: 100%;
      border: 2rpx solid #dbdbdb;
      color: #fff;
      padding: 20rpx 40rpx;
      border-radius: 40rpx;
      // display: flex;
      // align-items: center;
      font-weight: 600;
      span {
        margin-right: 20rpx;
      }
    }
    .count {
      display: flex;
      align-items: center;
      position: absolute;
      right: 50px;
      top: 120px;
      input {
        border: 1px solid rgb(194, 192, 192);
        width: 80px;
        margin-left: 10px;
      }
    }
  }

  .money {
    // padding: 0rpx 40rpx 30rpx;
    background: #fff;
    height: 280rpx;
    position: fixed;
    display: flex;
    bottom: 40rpx;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 30rpx;
    .money-item {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 42rpx;
      border: 1px solid rgb(221, 221, 221);
      .expenditure-amount {
        font-weight: 600;
        font-size: 32rpx;
      }
    }
    .preferential-amount {
      .total-money {
        font-weight: 600;
        font-size: 30rpx;
      }
      .kong {
        display: inline-block;
        width: 15rpx;
      }
      .totalFee {
        color: #df0027;
        font-size: 24rpx;
      }
    }
    .btn {
      display: flex;
      padding: 60rpx 0 20rpx 0;
      width: 100%;
      .btns {
        height: 100rpx;
        line-height: 100rpx;
        margin: 0 40rpx;
        border-radius: 100rpx;
        color: #fff;
        font-size: 30rpx;
        flex: 1;
      }
      .cancel {
        color: #868585;
        border: 1px solid #b3b3b3;
        background: #fff;
      }
    }
  }
}
</style>
